<!DOCTYPE html>
<html lang="en" >
  <head>
    <meta name="description" content="Angular Material: Containers with the Layout API">

    <link rel="stylesheet" href="https://rawgit.com/angular/bower-material/master/angular-material.min.css"/>

  </head>
  <body ng-app="MyApp" ng-cloak layout="column">

    <md-toolbar>    
      <h1>Angular Material Starter</h1>
    </md-toolbar>

    <div class="container" layout="row" flex>
        <md-sidenav md-is-locked-open="true" class="lightblue">Sidenav</md-sidenav>
        <md-content flex id="content" class="lightgreen" flex>Content</md-content>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.9/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.9/angular-animate.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.9/angular-aria.min.js"></script>
    <script src="https://rawgit.com/angular/bower-material/master/angular-material.min.js"></script>

    <script>
    angular
      .module('MyApp', ['ngMaterial'])
      .run(function($log){
        $log.debug("MyApp is ready!");
      });
    </script>
    
  </body>
</html>